<template>
  <div ref="chartDom"></div>
</template>

<script>
import * as echarts from "echarts";
import debounce from "lodash/debounce";
import { addListener, removeListener } from "resize-detector";
export default {
  props: {
    option: {
      type: Object,
      default: () => {},
    },
  },

  // 监听，option一改变就变
  watch: {
    // 因为改变的值是里面，所以要深度监听,但是这样不好，
    // 深度监听对非常耗性能，而且chart的数据特别多
    // option: {
    //   handler(val) {
    //     this.chart.setOption(val);
    //   },
    //   deep: true,
    // },

    option(val) {
      this.chart.setOption(val);
    },
  },

  // 防抖，避免点击触发多次
  created() {
    this.resize = debounce(this.resize, 300);
  },
  mounted() {
    this.renderChart();
    // 添加监听图表尺寸的变化,一旦变化重新渲染
    addListener(this.$refs.chartDom, this.resize);
  },

  beforeDestroy() {
    removeListener(this.$refs.chartDom, this.resize);
    this.chart.dispose();
    this.chart = null;
  },

  methods: {
    // 改变chart的尺寸
    resize() {
      console.log("resize");
      this.chart.resize();
    },

    // 准备并绘制图表
    renderChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(this.$refs.chartDom);
      // 绘制图表
      this.chart.setOption(this.option);
    },
  },
};
</script>

<style></style>
